<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--
 JSINQ, JavaScript integrated query
 Copyright (c) 2010 Kai Jäger. Some rights reserved.
 
 Use of this source code is governed by an MIT-style license that can be
 found in the license.txt file. 
-->

<head>
	<title>JSINQ example</title>	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
	<h1>JSINQ DOM example</h1>
	<p>
		The source code for this example can be found in the file 
		<em>dom.js</em>.
	</p>
	<p>
		This example showcases the use of <tt>jsinq.Query</tt>. It operates on
		a set of HTML-DOM nodes which are taken from the body of the input 
		table you see below. It will then select table rows by certain criteria
		and copy the matching rows into the results table below the input
		table.
	</p>
	
	<h2>Input</h2>
	<table border="1">
		<thead>
			<tr>
				<td>id</td>
				<td>firstname</td>
				<td>lastname</td>
				<td>gender</td>
			</tr>
		</thead>
		<tbody id="input">
			<!-- Note that this example uses absolute indices into the 
			childNodes list of the table rows below. You therefore cannot
			place additional whitespace between the table elements.
			This obviously isn't pretty and it is highly recommended that you
			use a JavaScript framework instead of twiddling with the DOM
			directly. This example does not use a JavaScript framework, only
			to avoid external dependencies. -->		
			<tr><td>1</td><td>John</td><td>Smith</td><td>male</td></tr>
			<tr><td>2</td><td>Jessica</td><td>Johnson</td><td>female</td></tr>
			<tr><td>3</td><td>Michael</td><td>Williams</td><td>male</td></tr>
			<tr><td>4</td><td>Amber</td><td>Davis</td><td>female</td></tr>
			<tr><td>5</td><td>Jonathan</td><td>Robinson</td><td>male</td></tr>
			<tr><td>6</td><td>Angela</td><td>Hill</td><td>female</td></tr>
			<tr><td>7</td><td>Richard</td><td>Bailey</td><td>male</td></tr>
			<tr><td>8</td><td>Shannon</td><td>Brooks</td><td>female</td></tr>
			<tr><td>9</td><td>Samuel</td><td>Patterson</td><td>male</td></tr>
			<tr><td>10</td><td>Taylor</td><td>Griffin</td><td>female</td></tr>
		</tbody>
	</table>	
	
	<h2>Results</h2>
	<table border="1">
		<thead>
			<tr>
				<td>id</td>
				<td>firstname</td>
				<td>lastname</td>
				<td>gender</td>
			</tr>
		</thead>
		<tbody id="results"></tbody>
	</table>
	
	<!-- Please note that this example uses the un-minified version of the
	jsinq library for debugging purposes. It is recommended that you use the
	minified version found in the build folder for production use. -->
	<script type="text/javascript" src="../source/jsinq.js">	
	</script>	
	<script type="text/javascript" src="../source/jsinq-query.js"></script>
	<script type="text/javascript" src="dom.js"></script>
</body>
</html>
